// 在vue模板中，我们直接使用$t("hello")来获取语言包变量；
// 在vue的js中我们使用this.$i18n.t("hello")或者i18n.t("hello")来获取语言包变量；
// 在vue以外的js中，我们可以使用i18n.t("hello")来获取语言包变量；
import Vue from "vue";
import VueI18n from "vue-i18n";
import store from "basic/stores";
import Constants from "common/constants";
import storeUtils from "utils/StoreUtils";
import enLocale from "element-ui/lib/locale/lang/en";
import zhLocale from "element-ui/lib/locale/lang/zh-CN";
import menuHandler from "common/menu/menuHandler";

Vue.use(VueI18n);

const locales = {
	"zh": Object.assign(require("data/zh.json"), menuHandler.createMenuCn(), zhLocale.default),
	"en": Object.assign(require("data/en.json"), menuHandler.createMenuEn(), enLocale.default)
};
const keys = Object.keys(locales);
const locale = storeUtils.getStore("locale") || Constants.base.i18n.DEFAULT;

const i18n = new VueI18n({
	locale: locale,
	messages: locales
});

//这里我们抛出一个setup方法，用来修改我们的语言； 并且在这个方法中，我们把用户选择的语言存储在localStorage里面，方便用户下次进入是直接使用上次选择的语言
//因为语言的不同，可能我们页面上的样式也会有相应的调整，所以这里在body上加入了相应的类名，方便我们做样式定制
i18n.setup = (lang) => {
	lang = lang || storeUtils.getStore("locale");
	lang = keys.indexOf(lang) !== -1 ? lang : Constants.base.i18n.DEFAULT;
	store.commit("storeCommit", {name: "locale", value: lang});

	let bodyDom = document.body;
	keys.forEach(lan => {
		bodyDom.classList.remove(`lang-${lan}`);
	});
	bodyDom.classList.add(`lang-${lang}`);
	bodyDom.setAttribute("lang", lang);
	//把当前语言设置到vue的配置里面，方便在代码中读取
	Vue.config.lang = lang;
	i18n.locale = lang;
};

console.log("i18n", i18n, i18n.locale, i18n.messages);

//设置默认语言为中文
i18n.setup(locale);
//把i18n绑定到window上，方便我们在vue以外的文件使用语言包
// window.i18n = i18n;

export default i18n;
